.bullets {
    background: white;
    padding: 1.2rem;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: repeat(5, 3rem) auto;
}

.bullet-control {
    display: none;
    width: 0;
}

.bullet-label {
    grid-column: 1 / 2;
    color: var(--dark-gray);
    height: 3rem;
    line-height: 3rem;
    cursor: pointer;
    position: relative;
    padding-left: 1.2rem;
}
.bullet-label:hover {
    color: var(--olive);
}

.bullet-item {
    grid-column: 2 / 3;
    grid-row: 1 / 7;
    
    display: none;
}

.bullet-control:checked + .bullet-label {
    color: var(--cta);
}

.bullet-control:checked + .bullet-label::before {
    content:'';
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left-color: var(--cta);
    position: absolute;
    left: 0;
    top: calc(50% - .3rem);
}


.bullet-control:checked + .bullet-label + .bullet-item {
    display: block;
    border-left: 1px solid var(--olive);
    padding-left: 1.2rem;
}


@media (max-width: 500px) {
    .bullets {
        display: block;
    }
    
    .bullet-label {
        display: block;
        padding-left: 0;
        font-weight: bold;
    }
    
    .bullet-label::after {
        content:'';
        width: .8rem;
        height: .8rem;
        border: 1px solid transparent;
        border-color: black black transparent transparent;
        display: inline-block;
        margin-left: .3rem;
        transform: rotate(45deg);
/*         transform-origin: center; */
        transition: transform .6s;
    }
    
    
    .bullet-item {
        display: block;
        overflow: hidden;
        max-height: 0;
        transition: max-height .5s;
        
    }
    
    .bullet-control:checked + .bullet-label::before {
        border:none;
    }

    .bullet-control:checked + .bullet-label::after {
        border-color: var(--cta) var(--cta) transparent transparent;
        margin-left: .9rem;
        position: relative;
        top: -.2rem;
        transform: rotate(135deg);
    }
    
    .bullet-control:checked + .bullet-label + .bullet-item {
        max-height: 500px;
        transition: max-height 1s;
        
        border-left: none;
        padding-left: 0;
    }
    
}